import React from 'react'
import { Button, Result,Layout, theme, Breadcrumb } from 'antd';
import { useNavigate } from 'umi';
import { NavLink, useLocation } from 'umi';
import StandBoxSider from '@/components/StandBoxSider';
import StandBoxHeader from '@/components/StandBoxHeader';
const { Content } = Layout;
export default function NotFound() {
    // 创建跳转方法
    const navigate=useNavigate();
    const handelSkipHome=()=>{
        navigate('/home')
    }
        // 背景颜色:#ffffff
        const {
            token: { colorBgContainer },
        } = theme.useToken();
    
        //#region 映射 路由路径对应面包屑名称
        const breadcrumbNameMap: Record<string, string> = {
            '/home': '首页',
            '/user-manage': '用户管理',
            '/user-manage/list': '用户列表',
            '/right-manage': '权限管理',
            '/right-manage/role': '角色管理',
            '/right-manage/role/list': '角色列表',
            '/right-manage/right': '权限分配',
            '/right-manage/right/list': '权限列表',
            '/news-manage': '新闻管理',
            '/news-manage/draft': '草稿箱',
            '/publish-manage/sunset':'已下线',
            '/publish-manage/published':'已发布',
            '/publish-manage/unpublished':'待发布',
            '/audit-manage/list':'审核列表',
            '/audit-manage/audit':'审核新闻',
            '/news-manage/category':'新闻分类',
            '/news-manage/preview/:id':'新闻预览',
            '/news-manage/update/:id':'新闻更新',
            '/news-manage/add':'撰写新闻',
            '/news-manage/list':'新闻列表',
            '/publish-manage':'发布管理',
            '/audit-manage':'审核管理',
        };
        const location = useLocation();
        // 获取路由路径，然后以/作为分隔符，形成一个路由路径的数组 例如 user-manage/list =>['user-manage','list']
        const pathSnippets = location.pathname.split('/').filter((i) => i); 
        //    根据路径生成一个Breadcrumb.Item的数组
        const extraBreadcrumbItems = pathSnippets.map((_, index) => {
            const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
            return (
                <Breadcrumb.Item key={url}>
                    <NavLink to={url}>{breadcrumbNameMap[url]}</NavLink>
                </Breadcrumb.Item>
            );
        });
        //#endregion
    return (
        <>
        <Layout>
            {/* 侧边栏*/}
            <StandBoxSider></StandBoxSider>
            <Layout className="site-layout" style={{ marginLeft: 200 }}>
                {/* 头部 */}
                <StandBoxHeader></StandBoxHeader>

                <Content style={{ margin: '16px 16px 0', overflow: 'initial' }}>
                    <Breadcrumb style={{ margin: '0 0 5px 0' }}>
                        {extraBreadcrumbItems}
                    </Breadcrumb>
                    <div style={{ padding: 12, minHeight: '90%', background: colorBgContainer }}>
                    <Result
            status="404"
            title="404"
            subTitle="Sorry, the page you visited does not exist."
            extra={<Button type="primary" onClick={handelSkipHome}>Back Home</Button>}
        />
                    </div>
                </Content>
            </Layout>
        </Layout>

    </>
       
    )
}
